<template>
  <div class="green">
    <header>
      <h1>
        记事本
        <a class="t-btn" @click="mtk">
          <span></span>
        </a>
      </h1>
    </header>
    <section class="container">
      <div class="event-add">
        <input type="text" class="n-input" placeholder="待办事项" v-model="text" @keydown.enter="add" />
        <button class="add-btn" @click="add">提交</button>
      </div>
      <div class="event-content">
        <div class="event-tab">
          未完成
          <span></span>
        </div>
        <div class="event-box">
          <ul>
            <li class="event-list" v-for="(item, index) in newli" :key="index" v-show="item.isChecked == 0">
              <input type="checkbox" name="" id="" v-model="item.isChecked" />
              <div>{{ item.title }}</div>
              <button class="cancel-btn" @click="qx(index)">取消</button>
            </li>
          </ul>
        </div>
        <div class="event-tab">
          已完成
          <span></span>
        </div>
        <div class="event-box">
          <ul>
            <li v-for="(item, index) in newli" :key="index" class="event-list" v-show="item.isChecked == 1">
              <input type="checkbox" name="" checked="checked" id="" v-model="item.isChecked">
              <div>{{ item.title }}</div>
              <span class="event-time">2023-9-11</span>
            </li>
          </ul>
        </div>
        <div class="event-tab">
          已取消
          <span></span>
        </div>
        <div class="event-box">
          <ul>
            <li class="event-list" v-for="(item, index) in newli" :key="index" v-show="item.isChecked == 2">
              <div class="event-delete">{{ item.title }}</div>
              <button class="cancel-btn" @click="hf(index)">恢复</button>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <footer class="footer">
      © 2023 <a href="https://www.baidu.com/" target="_blank">2210</a>
    </footer>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
let text = ref('');
let newli = reactive([])
let flag = ref(false)
//添加
function add() {
  if (text.value.trim() === '') {
    text.value = ""
    return alert('请输入')
  } else {
    newli.push({ title: text.value, isChecked: 0 })
    text.value = ''
  }
}
//取消按钮
function qx(index) {
  // console.log(index);
  newli[index].isChecked = 2
  // console.log(newli[index].isChecked);
}
//恢复按钮
function hf(index) {
  newli[index].isChecked = 0
}
//模态框
function mtk() {
  flag.value = !flag.value
  console.log(flag.value);
  let tools = document.querySelector('.event-tools')
  let theme = document.querySelector('.theme-box')
  let event = document.querySelector('.event-all')
  if (flag.value) {
    tools.style.transform = "translateX(250px)"
    tools.style.transition = "all 0.4s ease"
  } else {
    tools.style.transform = "translateX(0px)"
    tools.style.transition = "all 0.4s ease"
    theme.style.transform = "translateX(0px)"
    theme.style.transition = "all 0.4s ease"
    event.style.transform = "translateX(-100%)"
    event.style.transition = "all 0.4s ease"
  }
}
</script>

<style>
@import url(../../assets/css/ToDo.css);
</style>